<template>
	<view class="continer">
		<view class="font-30 pt-20 flex flex-center font-weight-600 height-140">
			洪梅镇-车辆资料
		</view>
		<nut-searchbar @focus="bindSearchFocus" :clearable="false" v-model="searchValue" background="transparent"
			input-background="#fff" placeholder="输入公司、车型、车牌等进行搜索">
			<template #leftin>
				<nut-icon name="search2" />
			</template>
		</nut-searchbar>
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
			<view v-for="(item,index) in list" :key="index" class="bg-fff radius-16 padding-30 mb-24">
				<view class="flex flex-a-center width-fill">
					<text class="font-weight-600">{{item.headLicensePlateNo}}</text>
					<text class="mlr-20 color-666">{{item.truckType}}</text>
					<text class="color-666">{{item.truckLength || '-'}}米</text>
				</view>
				<view class="width-fill mtb-24">
					{{item.agentName}}
				</view>
				<view class="flex flex-a-center flex-j-bt width-fill">
					<nut-tag v-if="item.checkSts=='Y'" type="success">正常</nut-tag>
					<nut-tag v-else type="danger">告警</nut-tag>
					<nut-button @tap="toDetail(item)" type="primary" size="small">详情</nut-button>
				</view>
			</view>
			<view class="height-10"></view>
		</scroll-view>
	</view>
	<nut-popup closeable round :custom-style="{ height: '500rpx',width:'700rpx' }" v-model:visible="showSearchPop">
		<view class="font-32 color-666 text-center mt-32">
			搜索条件
		</view>
		<nut-form>
			<nut-form-item label="公司">
				<simplePicker @confirm="pickerConfirm('agentIds',$event)" :defaultValue="searchFormData.agentIds"
					:columns="subAgentList" valueKey="agentId" labelKey="agentName"></simplePicker>
			</nut-form-item>
			<nut-form-item label="车型">
				<simplePicker @confirm="pickerConfirm('truckType',$event)" :defaultValue="searchFormData.truckType"
					:columns="vehicleTypeList" valueKey="sysEntityId" labelKey="sysEntityName"></simplePicker>
			</nut-form-item>
			<nut-form-item label="车牌号">
				<nut-input v-model="searchFormData.licensePlateNo" class="nut-input-text" placeholder="请输入车牌号" type="text" />
			</nut-form-item>
		</nut-form>
		<view class="text-center">
			<nut-button @tap="searchReset" type="warning" class="mr-16">重置</nut-button>
			<nut-button @tap="searchSubmit" type="primary">查询</nut-button>
		</view>
	</nut-popup>
	<tabBar></tabBar>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed
	} from "vue";
	import {
		getVehicleList
	} from '@/api/vehicleInfo.js'
	import {
		storeToRefs
	} from 'pinia'
	import useSelectOptions from '@/stores/useSelectOptions.js'

	const agentId = uni.getStorageSync('_agentId');

	const store = useSelectOptions()

	const {
		subAgentList,
		vehicleTypeList,
	} = storeToRefs(store)

	store.getSubAgentList()
	store.getVehicleTypeList()

	const page = ref(1);
	const list = ref([]);
	const showSearchPop = ref(false)
	const searchFormData = reactive({
		agentIds: agentId, // 公司
		truckType: '', //车型
		licensePlateNo: "", //车牌号
	})
	const searchValue = computed(() => {
		return Object.keys(searchFormData).filter(item => item != 'agentIds').map(key => searchFormData[key]).filter(
			item => item).length ? '点击查看搜索条件' : ''
	})

	const pickerConfirm = (key, {
		value
	}) => {
		if (key == 'agentIds') {
			searchFormData[key] = agentId
		} else {
			searchFormData[key] = value
		}
	}

	const getList = async () => {
		const data = await getVehicleList({
			page: page.value,
			...searchFormData
		}).catch(() => {
			page.value--
		})
		if (!data.atflist?.length) {
			page.value--
		} else {
			list.value.push(...data.atflist)
		}
	}

	getList();

	const searchReset = (e) => {
		page.value = 1;
		list.value = [];
		Object.keys(searchFormData).forEach(key => {
			searchFormData[key] = ''
		})
		getList()
	}
	const searchSubmit = (e) => {
		page.value = 1
		list.value = []
		getList()
		showSearchPop.value = false
	}


	const bindSearchFocus = () => {
		showSearchPop.value = true
	}
	const lower = (e) => {
		page.value++
		getList();
	}
	const toDetail = (item) => {
		uni.setStorageSync('_currVehicleInfo', item)
		uni.navigateTo({
			url: '/pages/vehicleDetail/vehicleDetail?id=' + item.agentTruckId
		});
	}
</script>

<style scoped lang="scss">
	.continer {
		.scroll-Y {
			height: calc(100vh - 360rpx);
			margin-top: 16rpx;
		}
	}
</style>